<template>
  <div class="chart-container">
    <div class="chart-box">
      <chart height="100%" :series-data="chart.seriesData" :legend-data="chart.legendData" width="100%" />
    </div>

  </div>
</template>

<script>
import Chart from '@/components/Charts/PieChart'

export default {
  name: 'PieChart',
  components: { Chart },
  data() {
    return {
      chart: { // 配置参数与 官网的一致
        title: '', // 标题
        legendLeft: '', // 图例距离左侧
        legendBottom: '', // 图例距离底部
        legendData: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'], // 图例
        seriesData: {} // 图表数据
      }
    }
  },
  mounted() {
    this.updataSeriesData()
  },
  methods: {
    updataSeriesData() {
      let a = 100
      setInterval(() => {
        a += 4
        this.chart.seriesData = {
          name: '每周创作文章',
          data: [
            { value: a, name: 'Industries' },
            { value: 100, name: 'Technology' },
            { value: 100, name: 'Forex' },
            { value: 100, name: 'Gold' },
            { value: 100, name: 'Forecasts' }
          ]
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.chart-box {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #fff;
}
</style>

